<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <Row :gutter="10">
          <div style="float:left">
            <RadioGroup v-model="order_type"
                        type="button"
                        button-style="solid"
                        @on-change="changeOrderType()">
              <Radio label="APP订单"></Radio>
              <Radio label="后台订单"></Radio>
            </RadioGroup>
          </div>
          <Button type="primary"
                  style="float:right;width:90px;height: 34px;font-size: 14px; margin-left:10px"
                  @click="exportData">导出</Button>
          <div style="float:right;margin-bottom: 10px;">
            <DatePicker type="daterange"
                        v-model="filter.created_at"
                        @on-change="search"
                        placement="bottom-end"
                        placeholder="选择下单时间"
                        style="width: 200px; margin-right: 10px;"></DatePicker>
          </div>
          <div style="float:right;margin-bottom: 10px;">
            <Input v-model="filter.phone"
                   @on-search="search"
                   search
                   enter-button="查询"
                   placeholder="请输入下单人机号"
                   style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
          </div>
          <div style="float:right;margin-bottom: 10px;">
            <Input v-model="filter.order_sn"
                   @on-search="search"
                   search
                   enter-button="查询"
                   placeholder="请输入订单编号"
                   style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
          </div>
          <div style="float:right;margin-bottom: 10px;">
            <Select v-model="filter.state"
                    style="width:160px;margin-right:10px;float: right;"
                    @on-change="search"
                    placeholder="订单状态">
              <Option value="-1">全部</Option>
              <Option value="0">待付款</Option>
              <Option value="1">待发货</Option>
              <Option value="2">待收货</Option>
              <Option value="3">已完成</Option>
              <Option value="4">已取消</Option>
              <Option value="5">租赁中</Option>
            </Select>
          </div>
        </Row>
        <Row class="margin-top-10 table_pattern">
          <Table :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="show_send_order"
           title="订单发货"
           width="500px"
           :mask-closable="false"
           class="goods_modal">
      <Form v-model="order_send_info"
            ref="order_send_info"
            :label-width="80">
        <FormItem label="物流名称"
                  prop="send_name">
          <Input v-model="order_send_info.send_name"
                 placeholder="物流名称"
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="物流单号"
                  prop="send_code">
          <Input v-model="order_send_info.send_code"
                 placeholder="物流单号"
                 style="width: 370px;" />
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="orderSendSubmit()"
                  style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">提交</Button>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="show_order_info"
           title="订单详情"
           width="700px"
           :mask-closable="false"
           class="goods_modal">
      <div id="orderDetail"
           v-if='show_order_info'>
        <Row class="margin-top-10 table_pattern"
             v-if="zl_time == ''"
             style='margin-left:20px'>
          <Table :columns="columns_good"
                 :data="good_list"></Table>
        </Row>
        <Row class="margin-top-10 table_pattern"
             v-if="zl_time != ''"
             style='margin-left:20px'>
          <Table :columns="columns_good_zl"
                 :data="good_list"></Table>
        </Row>
        <div style="margin-top: 30px; padding-left: 160px; font-size:16px">
          <p>
            <span style="display:inline-block; width:100px; height:30px;">订单号：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.order_sn}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">总金额：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.money}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">委托开始：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.good_list[0].start_date}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">委托结束：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.good_list[0].end_date}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">时长：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.good_list[0].lease_num}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">下单账户：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.user_name}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">下单手机：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.phone}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">数量：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.good_list[0].num}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">规格：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.good_list[0].specs_name}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">单价：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.good_list[0].unit_price}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">发货类型：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.good_list[0].send_type_name}}</span>
          </p>
          <p style="margin-top:10px"
             v-if='order_info.good_list[0].send_type == 0'>
            <span style="display:inline-block; width:100px; height:30px;">收货手机：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.address_phone}}</span>
          </p>
          <p style="margin-top:10px"
             v-if='order_info.good_list[0].send_type == 0'>
            <span style="display:inline-block; width:100px; height:30px;">收货姓名：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.address_name}}</span>
          </p>
          <p style="margin-top:10px"
             v-if='order_info.good_list[0].send_type == 0'>
            <span style="display:inline-block; width:100px; height:30px;">收货地址：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.address}}</span>
          </p>
          <p style="margin-top:10px"
             v-if='order_info.good_list[0].send_type == 1'>
            <span style="display:inline-block; width:100px; height:30px;">自提地址：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.address}}</span>
          </p>
          <p style="margin-top:10px"
             v-if='order_info.good_list[0].send_type == 1'>
            <span style="display:inline-block; width:100px; height:30px;">自提电话：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.address_phone}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">创建时间：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.created_time}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">运费：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.money_yf}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">合同名称：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.agreement_name}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">合同附件：</span>
            <span style="display:inline-block; width:300px; min-height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.file}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">订单状态：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.state_name}}</span>
          </p>
          <p style="margin-top:10px">
            <span style="display:inline-block; width:100px; height:30px;">备注：</span>
            <span style="display:inline-block; width:300px; height:30px; margin-left:30px; border: 0px solid #757575; padding:2px 2px 2px 5px">{{order_info.remark}}</span>
          </p>
        </div>
      </div>
      <Button type="primary"
              @click="printHtmlCss"
              style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:255px; margin-top:13px; margin-bottom:20px">打印</Button>
    </Modal>
    <Modal v-model="show_edit_order"
           title="订单编辑"
           width="700px"
           :mask-closable="false"
           class="goods_modal">
      <Form :label-width="120"
            style='margin-left:60px'>
        <FormItem label="合同名称">
          <Input v-model="order_info.agreement_name"
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="租赁方">
          <Input v-model="order_info.user_name"
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="订单号">
          <Input v-model="order_info.order_sn"
                 readonly
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="订单金额">
          <Input v-model="order_info.money"
                 readonly
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="订单状态">
          <Select v-model="order_info.state"
                  style="width:370px;"
                  placeholder="订单状态">
            <Option value="0">待付款</Option>
            <Option value="1">待发货</Option>
            <Option value="2">待收货</Option>
            <Option value="3">已完成</Option>
            <Option value="4">已取消</Option>
            <Option value="5">租赁中</Option>
            <Option value="6">已评价</Option>
          </Select>
        </FormItem>
        <FormItem label="创建时间">
          <Input v-model="order_info.created_time"
                 readonly
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="收货人手机号">
          <Input v-model="order_info.address_phone"
                 readonly
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="收货人姓名">
          <Input v-model="order_info.address_name"
                 readonly
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="收货人地址">
          <Input v-model="order_info.address"
                 readonly
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="收货人信息">
          <Input v-model="order_info.address_name+' '+order_info.address_phone+' '+order_info.address"
                 readonly
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="运费">
          <Input v-model="order_info.money_yf"
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="备注">
          <Input v-model="order_info.remark"
                 style="width: 370px;" />
        </FormItem>
        <FormItem label="附件"
                  prop="file">
          <div>
            <Row type="flex"
                 justify="start"
                 align="middle"
                 class="height-100">
              <div style="display: block;text-align: center;">
                <Upload ref="upload"
                        :max-size="20480"
                        :show-upload-list="false"
                        action="https://up.qiniup.com"
                        :on-format-error="handleFormatError"
                        :before-upload="handleBeforeUpload"
                        :on-progress="handleProgress"
                        :on-success="handleSuccess"
                        :data="{token:upload_token}"
                        accept=".pdf, .doc, .docx">
                  <Button cover="ios-cloud-upload-outline">上传文件</Button>
                  <span style="padding-left:20px; color:#999">文件不得超过20M</span>
                </Upload>
              </div>
            </Row>
            <Row class="margin-top-20">
              <div>{{this.order_info.file}}</div>
            </Row>
          </div>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="submitOrder()"
                  style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:100px">提交</Button>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="show_order_info1"
           title="订单详情"
           width="700px"
           :mask-closable="false"
           class="public_modal_header edit_modal show_audit">
      <div id="orderDetail1"
           style="padding: 20px 0; color:#000; font-size:16px"
           v-if='show_order_info'>
        <div style="height:40px; margin-top:10px;display:flex;justify-content:center;align-items:center">
          <div style="float:left">
            <img src="https://qiniu.mocomedia.cn/Fif60241WY_lWg3AySaE0uCH2fXx.jpg"
                 style="border-radius:16px; width:32px; height:32px">
          </div>
          <div style="margin-top:2px;margin-left:10px;float:left;font-size:20px;font-weight:bolder">常电通用电需求全流程管理系统</div>
        </div>
        <div style="clear: both"></div>
        <div style="margin-top: 5px; padding-left: 50px;">
          <p style="margin-top:5px;margin-left:10px;font-weight:bolder">租赁方</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.user_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同名称</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.agreement_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">服务委托开始日期</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.good_list[0].start_date}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">服务委托结束日期</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.good_list[0].end_date}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">数量</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.good_list[0].num}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">规格</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.good_list[0].specs_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">单价</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.good_list[0].unit_prize}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">租赁时长</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.good_list[0].lease_num+order_info.good_list[0].unit_type_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">运费</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.money_yf}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">合同总价</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.money}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">备注</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.remark}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">产品名称</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.good_list[0].good_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">社会信用代码</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.code}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">联系人</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.address_name}}</p>
          <p style="margin-top:13px;margin-left:10px;font-weight:bolder">电话</p>
          <p style="margin-top:5px;margin-left:10px">{{order_info.address_phone}}</p>
        </div>
      </div>
      <Button type="primary"
              @click="printHtmlCss"
              style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:305px; margin-top:13px; margin-bottom:20px">打印</Button>
    </Modal>
  </div>
</template>

<script>
import printJS from "print-js";
import config from '@/config'
import Time from '@/tool/Time'
import { getQiniu, orderList, orderInfo, editOrder, auditOrder, sendOrder, orderSuccess, changeOrderStatus } from '@/api/main'
export default {
  data () {
    return {
      upload_token: '',
      qiniu_url: '',
      order_type: 'APP订单',
      audit_reasson: '',
      pagenation: {},
      show_order_good: false,
      show_refund_audit: false,
      show_order_info: false,
      show_send_order: false,
      order_info: {},
      order_send_info: {
        send_name: '',
        send_code: '',
      },
      filter: {
        page: 0,
        order_sn: '',
        phone: '',
        created_at: ['', ''],
        created_at_range: '',
        state: '-2'
      },
      list: [],
      good_list: [],
      current_order: {},
      columns: [
        {
          key: 'order_sn',
          title: '订单号',
          render: (h, params) => {
            return h('strong', params.row.order_sn)
          },
        },
        {
          key: 'money',
          title: '总价',
          render: (h, params) => {
            return h('strong', params.row.money)
          },
        },
        {
          key: 'lease_num',
          title: '时长',
          render: (h, params) => {
            return h('strong', params.row.lease_num + params.row.unit_type_name)
          },
        },
        {
          key: 'good_num',
          title: '数量',
          render: (h, params) => {
            return h('strong', params.row.good_num)
          },
        },
        {
          key: 'user_name',
          title: '下单账户',
          render: (h, params) => {
            return h('strong', params.row.user_name)
          },
        },
        {
          key: 'phone',
          title: '下单手机',
          render: (h, params) => {
            return h('strong', params.row.phone)
          },
        },
        {
          key: 'send_type',
          title: '发货类型',
          render: (h, params) => {
            return h('strong', params.row.send_type == 1 ? '自提' : '物流')
          },
        },
        {
          key: 'state_name',
          title: '订单状态',
          render: (h, params) => {
            return h('strong', params.row.state_name)
          },
        },
        {
          key: 'created_time',
          title: '下单时间',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                  },
                  on: {
                    click: () => {
                      this.editOrder(params.row)
                    },
                  },
                },
                '编辑',
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    //display: params.row.state == 0 ? 'inline-block': 'none'
                  },
                  on: {
                    click: () => {
                      this.orderInfo(params.row)
                    },
                  },
                },
                '订单详情',
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    display: params.row.state == 1 ? 'inline-block' : 'none'
                  },
                  on: {
                    click: () => {
                      this.sendOrder(params.row)
                    },
                  },
                },
                '发货',
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '确定完成该笔订单吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      obj.id = params.row.id
                      orderSuccess(obj).then(res => {
                        if (res.code === 0) {
                          this.$Message.success('操作成功')
                          this.init()
                        } else {
                          this.$Message.success(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        margin: '5px 5px 5px 0',
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF',
                        display: params.row.state == 5 ? 'inline-block' : 'none'
                      },
                      props: {
                        placement: 'top',
                      }
                    },
                    '订单完成',
                  ),
                ],
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除该订单吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      obj.id = params.row.id
                      obj.status = -1
                      changeOrderStatus(obj).then(res => {
                        if (res.code === 0) {
                          let _this = this
                          this.$Message.success('删除成功')
                          this.init()
                        } else {
                          this.$Message.success(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF'
                      },
                      props: {
                        placement: 'top',
                        size: 'small',
                      },
                    },
                    '删除',
                  ),
                ],
              )
            ])
          },
        },
      ],
      columns_good: [
        {
          key: 'good_name',
          title: '商品名称',
          render: (h, params) => {
            return h('strong', params.row.good_name)
          },
        },
        {
          key: 'unit_price',
          title: '商品单价',
          render: (h, params) => {
            return h('strong', params.row.unit_price)
          },
        },
        {
          key: 'specs_name',
          title: '规格名称',
          render: (h, params) => {
            return h('strong', params.row.specs_name)
          },
        },
      ],
      columns_good_zl: [
        {
          key: 'good_name',
          title: '商品名称',
          render: (h, params) => {
            return h('strong', params.row.good_name)
          },
        },
        {
          key: 'unit_price',
          title: '商品单价',
          render: (h, params) => {
            return h('strong', params.row.unit_price + '/' + params.row.unit_type_name)
          },
        },
        {
          key: 'specs_name',
          title: '规格名称',
          render: (h, params) => {
            return h('strong', params.row.specs_name)
          },
        },
        {
          key: 'zl_time',
          title: '租赁时间',
          render: (h, params) => {
            return h('strong', params.row.zl_time)
          },
        },
        {
          key: 'lease_num',
          title: '租赁时长',
          render: (h, params) => {
            return h('strong', params.row.lease_num)
          },
        },
      ],
      zl_time: '',
      lease_num: 0,
      unit_type_name: '',
      show_edit_order: false,
      show_order_info1: false
    }
  },
  methods: {
    printHtmlCss () {
      const style = "@page { margin: 0 } @media print { h1 { color: blue } }"; //直接写样式
      printJS({
        printable: "orderDetail",
        type: "html",
        style: style,
        scanStyles: false
      });
    },
    changeOrderType () {
      this.$router.push({ name: 'order_list_offline' })
    },
    change: function (page) {
      this.filter.page = page - 1
      this.init()
    },
    search: function () {
      this.filter.page = 0
      this.init()
    },
    orderGood (obj) {
      this.good_list = obj.good_list
      this.show_order_good = true
    },
    orderInfo (order) {
      let _this = this
      let obj = {}
      obj.id = order.id
      orderInfo(obj).then(res => {
        if (res.code == 0) {
          _this.order_info = res.data
          _this.good_list = res.data.good_list
          _this.zl_time = res.data.good_list[0].zl_time
          _this.show_order_info = true
        } else {
          _this.$Message.error(res.text);
        }
      })
    },
    editOrder (order) {
      let _this = this
      let obj = {}
      obj.id = order.id
      orderInfo(obj).then(res => {
        if (res.code == 0) {
          _this.order_info = res.data
          _this.order_info.state = _this.order_info.state.toString()
          _this.unit_type_name = res.data.good_list[0].unit_type_name
          _this.lease_num = res.data.good_list[0].lease_num
          _this.show_edit_order = true
        } else {
          _this.$Message.error(res.text);
        }
      })
    },
    submitOrder () {
      let _this = this
      editOrder(_this.order_info).then(res => {
        if (res.code == 0) {
          _this.$Message.success('操作成功');
          _this.show_edit_order = false
          _this.init()
        } else {
          _this.$Message.error(res.text); return;
        }
      })
    },
    sendOrder (obj) {
      this.current_order = obj
      this.show_send_order = true
    },
    orderSendSubmit () {
      let _this = this
      if (_this.order_send_info.send_name == '') {
        this.$Message.error('请输入物流名称'); return;
      }
      if (_this.order_send_info.send_code == '') {
        this.$Message.error('请输入物流单号'); return;
      }
      let obj = {}
      obj.id = _this.current_order.id
      obj.send_name = _this.order_send_info.send_name
      obj.send_code = _this.order_send_info.send_code
      sendOrder(obj).then(res => {
        if (res.code == 0) {
          _this.$Message.success('发货成功');
          _this.show_send_order = false
          _this.orderInfo(_this.order_info)
          _this.init()
        } else {
          _this.$Message.error(res.text); return;
        }
      })
    },
    init () {
      let _this = this
      orderList(_this.filter).then(res => {
        _this.list = res.data
        _this.pagenation.currentPage = parseInt(res.currentPage) + 1
        _this.pagenation.totalPage = parseInt(res.totalPage)
        _this.pagenation.perPage = parseInt(res.perPage)
      })
    },
    handleFormatError (file) {
      this.$Message.error('文件 ' + file.name + ' 格式不正确，请选择word或者pdf文件。')
    },
    handleBeforeUpload (file) {
      if (file.size > 1024 * 1024 * 20) {
        this.$Message.error("文件大小不能超过20M");
        return;
      }
    },
    handleProgress (event, file) { },
    handleSuccess (event, file, fileList) {
      this.order_info.file = file.response.domain + file.response.key
    },
    async getToken () {
      let qiniu = await getQiniu()
      this.upload_token = qiniu.token
      this.qiniu_url = qiniu.url
    },
    formatJson (filter_val, jsonData) {
      return jsonData.map(v => filter_val.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 1000
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      orderList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            _this.export()
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['序号', '租赁方', '合同名称', '服务委托期限', '合同价格', '合同备注', '产品名称', '社会信用代码', '联系人', '电话'];
            const filter_val = ['id', 'name', 'agreement_name', 'service_date', 'money', 'remark', 'product', 'code', 'contact_user_name', 'contact_phone'];
            const data = _this.formatJson(filter_val, _this.export_list)
            export_json_to_excel(tHeader, data, '订单数据')
          }
        }
      })
    },
  },
  watch: {
    'filter.created_at': function () {
      let created_at_start = Time.dateToTimestamp(this.filter.created_at[0])
      let created_at_end = Time.dateToTimestamp(this.filter.created_at[1])
      if (created_at_start !== 0 && created_at_end !== 0) {
        this.filter.created_at_range = created_at_start + '-' + created_at_end
      } else {
        this.filter.created_at_range = ''
      }
    },
  },
  mounted () {
    this.getToken()
    this.init()
  },
}
</script>
<style lang="less">
@page {
	margin-top: 1mm; //去掉页眉
	margin-bottom: 1mm; //去掉页脚
}
.left {
	width: 100%;
	//padding-left: 50px;
	p {
		color: #333;
		font-size: 14px;
		margin-bottom: 10px;
		line-height: 28px;
	}
}
</style>